<template>
  <el-dialog
    :title="optType ? '申诉审核' : '查看风控'"
    :visible.sync="visible"
    width="60%"
    top="13vh"
    :before-close="closeAuditRiskDialogHandle"
    :close-on-click-modal="false"
    class="audit-risk-dialog">
    <el-descriptions size="medium">
      <el-descriptions-item label="用户名称">{{ userRisk.userName }}</el-descriptions-item>
      <el-descriptions-item label="所属部门">{{ userRisk.riskType | riskTypeFormat(typeEnums) }}</el-descriptions-item>
      <el-descriptions-item label="风控状态">{{ userRisk.status | statusFormat(statusEnums) }}</el-descriptions-item>
      <el-descriptions-item label="风控时间">{{ userRisk.createTime }}</el-descriptions-item>
      <el-descriptions-item label="操作用户">{{ userRisk.createUser }}</el-descriptions-item>
    </el-descriptions>
    <el-form label-width="75px">
      <el-form-item label="风控原因:">
        <el-input
          v-model="userRisk.riskReason"
          type="textarea"
          rows="4"
          resize="none"
          readonly>
        </el-input>
      </el-form-item>
    </el-form>
    <el-row v-show="optType" :gutter="20">
      <el-col :span="12">
        <el-divider content-position="center">用户申诉内容</el-divider>
        <el-input
          v-loading="dataLoad"
          element-loading-text="用户申诉内容加载中"
          element-loading-spinner="el-icon-loading"
          v-model="userAppealDesc"
          type="textarea"
          rows="10"
          resize="none"
          readonly
        >
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-divider content-position="center">审核表单</el-divider>
        <el-form ref="auditRiskForm" :model="auditRiskForm" :rules="auditRiskRules" label-position="top" label-width="90px">
          <el-form-item label="" prop="auditStatus">
            <el-radio-group v-model="auditRiskForm.auditStatus" @input="auditStatusChangeHandle">
              <el-radio :label="1" border>通过</el-radio>
              <el-radio :label="2" border>拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核回复" prop="auditDesc">
            <el-input
              v-model="auditRiskForm.auditDesc"
              type="textarea"
              rows="4"
              maxlength="250"
              resize="none"
              show-word-limit
              placeholder="请输入回复内容"
              ref="auditDescRef">
            </el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <span slot="footer">
      <el-button @click="closeAuditRiskDialogHandle(undefined)">取 消</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary" @click="submitAuditRiskHandle">禁用</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "audit-risk-dialog",
    props: {
      // 用户风控类型枚举列表
      typeEnums: {
        type: Array,
        default: () => []
      },
      // 用户风控状态枚举列表
      statusEnums: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        // 弹出框显示状态[true-显示 false-不显示]
        visible: false,
        // 操作方式[true-审核用户申诉 false-查看用户风控]
        optType: false,
        // 用户风控对象
        userRisk: {
          // 用户名称
          userName: undefined,
          // 风控类型
          riskType: undefined,
          // 风控原因
          riskReason: undefined,
          // 风控状态
          status: undefined,
          // 风控时间
          createTime: undefined,
          // 操作用户
          createUser: undefined
        },
        // 用户申诉内容
        userAppealDesc: undefined,
        // 用户申诉审核表单对象
        auditRiskForm: {
          // 被风控的用户主键
          userId: undefined,
          // 用户风控记录主键
          riskRecordId: undefined,
          // 用户申诉记录主键
          appealId: undefined,
          // 审核状态[1-通过 2-拒绝]
          auditStatus: undefined,
          // 审核回复
          auditDesc: undefined
        },
        // 数据是否加载[false-不加载 true-加载]
        dataLoad: false,
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 用户申诉审核表单校验对象
        auditRiskRules: {
          auditStatus: [
            { required: true, message: '请选择审核状态', trigger: 'blur' }
          ],
        },

      }
    },
    filters: {
      /**
       * 用户风控类型枚举映射
       * @param {number} value     用户风控类型值
       * @param {Array}  typeEnums 用户风控类型枚举列表
       * @returns {string} 用户风控类型名称
       */
      riskTypeFormat(value, typeEnums) {
        for (let typeEnum of typeEnums) {
          if (typeEnum.value === value) {
            return typeEnum.name;
          }
        }
        return '未知';
      },
      /**
       * 用户风控状态枚举映射
       * @param {number} value     用户风控状态值
       * @param {Array} statsEnums 用户风控状态枚举列表
       * @return {string} 用户风控状态名称
       */
      statusFormat(value, statsEnums) {
        for (let statsEnum of statsEnums) {
          if (statsEnum.value === value) {
            return statsEnum.name;
          }
        }
        return '未知'
      }
    },
    methods: {
      /**
       * 初始化用户申诉审核弹出框方法
       * @param {Object} userRisk 用户风控对象
       * @param {boolean} optType 操作方式[true-审核用户申诉 false-查看用户风控]
       */
      initAuditRiskDialog(userRisk, optType) {
        // console.log('userRisk', userRisk);
        this.optType = optType;
        let _userRisk = this.userRisk;
        // 用户风控对象属性赋值
        for (let propKey in _userRisk) {
          _userRisk[propKey] = userRisk[propKey];
        }

        let _auditRiskForm = this.auditRiskForm;
        _auditRiskForm.userId = userRisk.userId;
        _auditRiskForm.riskRecordId = userRisk.riskRecordId;

        this.getUserAppealDesc(userRisk.riskRecordId);

        // 打开弹出框
        this.visible = true;
      },
      /**
       * 获取用户申诉内容方法
       * @param riskRecordId
       */
      getUserAppealDesc(riskRecordId) {
        // 开始数据加载
        this.dataLoad = true;
        this.$axios.$get('/sys/user-appeal/get', { params: { riskRecordId }})
          .then(({ data }) => {
            this.auditRiskForm.appealId = data.appealId
            this.userAppealDesc = data.appealDesc
          })
          .catch(() => {})
          .finally(() => {
            // 数据加载结束
            this.dataLoad = false;
          })
      },
      /**
       * 审核状态值变化时触发事件
       * @param {number} auditStatus 最新审核状态值
       */
      auditStatusChangeHandle(auditStatus) {
        if (auditStatus === 2) {
          // 审核回复输入框获取焦点
          this.$refs.auditDescRef.focus();
        }
      },
      /**
       * 用户申诉审核提交事件
       */
      submitAuditRiskHandle() {
        this.$refs.auditRiskForm.validate(valid => {
          if (!valid) {
            return false;
          }
          let _auditRiskForm = this.auditRiskForm;
          if (_auditRiskForm.auditStatus === 2 && !_auditRiskForm.auditDesc) {
            this.notify('', '温馨提示', '审核拒绝时，审核回复输入不能为空');
            return false;
          }
          // 按钮禁用
          this.buttonLoad = true;
          this.$axios.$post('/sys/user-risk/audit', _auditRiskForm)
            .then(() => {
              this.closeAuditRiskDialogHandle(1);

            })
            .catch(err => {
              if (err.code === 409) {
                this.closeAuditRiskDialogHandle(1);
              }
            })
            .finally(() => {
              // 按钮恢复可使用
              this.buttonLoad = false;
            })

        });
      },
      /**
       * 关闭用户申诉审核弹出框事件
       * @param {number | function} num 是否刷新父级组件数据[number-刷新 undefined-不刷新 function-不刷新]
       */
      closeAuditRiskDialogHandle(num) {
        // 关闭弹出框
        this.visible = false;

        let _userRisk = this.userRisk;
        for (let propKey in _userRisk) {
          _userRisk[propKey] = undefined;
        }
        this.userAppealDesc = undefined;
        let _auditRiskForm = this.auditRiskForm;
        for (let propKey in _auditRiskForm) {
          _auditRiskForm[propKey] = undefined;
        }
        // 清空表单校验状态
        this.$refs.auditRiskForm.clearValidate();

        if (typeof num === 'number') {
          // 传递事件，刷新父组件数据
          this.$emit('refresh')
        }
      }
    }
  }
</script>

<style scoped>
  .audit-risk-dialog >>> .el-dialog__body {
    padding: 20px;
  }
</style>
